<template>
  <div class="friends-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>好友列表</span>
      </div>
      <el-scrollbar height="500px">
        <div
          v-for="friend in friends"
          :key="friend.id"
          class="friend-item"
          @click="goToChat(friend)"
        >
          <el-avatar :size="50" :src="friend.avatar" />
          <div class="friend-info">
            <div class="friend-name">{{ friend.name }}</div>
            <div class="friend-last-message">{{ friend.lastMessage }}</div>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      friends: [
        {
          id: 1,
          name: '张三',
          avatar: 'https://img.touxiangkong.com/uploads/allimg/2023030412/vp2d0oq0kcw.jpg',
          lastMessage: '你好，最近怎么样？',
        },
        {
          id: 2,
          name: '李四',
          avatar: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.FpIIdDXmxIIYgmV57fzPTgHaFj?rs=1&pid=ImgDetMain',
          lastMessage: '今天天气不错！',
        },
        {
          id: 3,
          name: '王五',
          avatar: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.xJ6pG6DffJn4fGvkymqPEwHaE8?rs=1&pid=ImgDetMain',
          lastMessage: '有空一起吃饭吗？',
        },
      ],
    };
  },
  methods: {
    goToChat(friend) {
      uni.navigateTo({
        url: `/pages/friends/Chat?id=${friend.id}`,
      });
    },
  },
};
</script>

<style scoped>
.friends-container {
  display: flex;
  justify-content: center;
  padding: 20px;
}
.box-card {
  width: 100%;
}
.friend-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}
.friend-item:last-child {
  border-bottom: none;
}
.el-avatar {
  margin-right: 10px;
}
.friend-info {
  flex: 1;
}
.friend-name {
  font-size: 16px;
  font-weight: bold;
}
.friend-last-message {
  font-size: 14px;
  color: #888;
}
</style> 